import React, {Component} from 'react';
import { Store } from 'le5le-store';

// 这个组件是一个组态组件，用以展示定时获取的后台数据的值
class TextShower extends Component {

    timerHere = null;
    mySubscriber = null;

    state = {
        numberHere: 0
    }

    componentDidMount() {
        // 订阅事件
        let { my_text } = this.props;
        if (!my_text) return;
        if (my_text === "") return;
        this.mySubscriber = Store.subscribe("backEndData", (value) => {
            this.setState({ numberHere:  value[my_text]});
        })
    }

    render() {
        // console.log("this.props", this.props);
        const { my_text } = this.props;
        const { numberHere } = this.state;
        return (
            <div>
                This is text shower. Text is { my_text?my_text: "null" }. Number here is {numberHere}.
            </div>
        );
    }

    componentWillUnmount() {
        // 取消监听
        if (this.mySubscriber && this.mySubscriber.unsubcribe()){
            this.mySubscriber.unsubcribe();
        }
    }
}

export default TextShower;
